@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?ymwuty');
    src: url('../fonts/icomoon.eot?ymwuty#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?ymwuty') format('truetype'), url('../fonts/icomoon.woff?ymwuty') format('woff'), url('../fonts/icomoon.svg?ymwuty#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  
  body, div, p, span, input, label, small, img, a, ul, li {
    padding: 0;
    margin: 0;
  }
  
  body {
    //font-size: 14px;
    box-sizing: border-box;
    background-color: #081024;
    font-size: 1rem;
  }
  li {
    list-style: none;
  }
  
  //头部部分
  .header{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    margin: 0 auto;
    z-index: 999;
    display: none;
  
    .dts-header-box {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
  
      .dts-image-box{
        width: 100%;
        height: 100%;
        img {
          width: 100%;
        }
      }
      .account-button{
        position: absolute;
        top: 50%;
        right: -10%;
        transform: translateY(-50%);
        height: 50%;
        width: 50%;
        a {
          width: 100%;
          height: 100%;
          display: block;
          img {
            height: 100%;
          }
        }
  
    }
  
  
    }
  }
  
  //注册登录页面部分
  .account-login{
    margin-top: 20%;
    margin-left: 8%;
    margin-right: 8%;
    width: 84%;
    color: #fff;
    display: none;
  
    .account-box{
      border: 1px solid #29548a;
      width: 100%;
      padding: 0.5%;
      position: relative;
      .close-box{
        display: block;
        width: 10%;
        height: 10%;
        position: absolute;
        top: 0.5%;
        right: 0.5%;
        i {
          content: "";
          font-family: icomoon;
          font-style: normal;
          width: 50%;
          height: 50%;
          line-height: 50%;
          display: block;
          position: absolute;
          top: 15%;
          right: 0;
          color: #29548a;
          //text-align: center;
        }
      }
  
      .account-content{
        border: 1px solid #697cb3;
        background: #151d33;
        width: 100%;
        padding: 15% 6% 6%;
        box-sizing: border-box;
  
  
        .account-header{
          width: 100%;
          margin-bottom: 5%;
          overflow: hidden;
  
          ul {
            li {
              list-style: none;
              float: left;
              width: 50%;
              text-align: center;
              background-color: #1d2742;
              padding-top: 1%;
              padding-bottom: 1%;
            }
            .active{
              background: #18a3f0;
              color: #000;
  
            }
          }
  
        }
        .account-body {
          li {
            .register,
            .login {
              width: 100%;
  
              .form-item-box {
                width: 100%;
  
                .form-item {
                  width: 100%;
                  background: #fff;
                  white-space: nowrap;
                  padding: 2% 1%;
                  color: #000;
                  display: flex;
  
                  label {
                    flex: 5%;
                  }
                  input {
                    border:none;
                    outline: none;
                    width: 100%;
                    flex: 95%;
  
                  }
  
                }
                small{
                  display: block;
                  margin-bottom: 2%;
                  margin-top: 1%;
  
                }
              }
              .button-box{
                width: 100%;
                text-align: center;
                margin-top: 5%;
                .button{
                  width: 60%;
                }
              }
            }
  
            &:first-of-type {
              display: block;
  
            }
            &:last-of-type {
              display: none;
  
            }
          }
  
        }
  
        .quickLogin{
          margin-top: 5%;
          text-align: center;
          width: 100%;
  
          span {
            //height: 100%;
            //line-height: 100%;
          }
          a {
            width: 50%;
            display: inline;
            margin-right: 2%;
            text-align: left;
            vertical-align: middle;
  
            img {
              width: 10%;
            }
          }
        }
      }
    }
  }
  .mask {
    background: rgba(0, 0, 0, 0.6);
    z-index: 998;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
  }
  
  //轮播图部分
  .banner-box{
    background: url("../static/images/banner_30cd86f.jpg") top center no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    //margin-left: -2%;
    .banner{
      width: 100%;
      height: 100%;
      padding-top: 15.4%;
      padding-bottom: 45%;
  
      .swiper-container {
        width: 100%;
        height: 100%;
  
        .swiper-slide {
          background-position: center;
          background-size: cover;
          //width: 300px;
          //height: 300px;
          width: 50%;
          //height: 47%;
          padding-top: 75%;
          //padding-bottom: 25%;
        }
      }
    }
  
  }
  
  .introduce{
    padding-left: 5%;
    padding-right: 5%;
  
    .introduce-box{
      border: 1px solid #29548a;
      width: 100%;
      height: 100%;
      background-color: #19283e;
  
      .intro-header{
        background: url("../static/images/jj-head_129625e.jpg") top center no-repeat;
        background-size: 100%;
        width: 100%;
        height: 100%;
        text-align: center;
  
        p {
          margin-bottom: 0;
          padding-top: 5%;
          padding-bottom: 5%;
          display: block;
          height: 100%;
          line-height: 100%;
          font-size: 100%;
          color: #fff;
  
        }
  
      }
  
      .intro-content{
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        margin-top: -5%;
        background: url("../static/images/js-bg_d8ec190.png") right bottom no-repeat;
        background-size: contain;
  
        p{
          padding: 10% 30% 5% 5%;
          //padding-bottom: 5%;
          //padding-left: 5%;
          //padding-right: 30%;
          box-sizing: content-box;
          //width: 65%;
          margin-bottom: 0;
          color: #fff;
        }
  
  
      }
      .intro-bottom{
        width: 100%;
        height: 100%;
  
        .bottom-bg{
          background: url("../static/images/bottom_5baadae.png") bottom center no-repeat;
          background-size: 100%;
          width: 100%;
          height: 100%;
          padding-bottom: 5%;
        }
  
      }
    }
  }
  
  .comments{
    padding-left: 5%;
    padding-right: 5%;
    margin-top: 5%;
    .comments-box{
      border: 1px solid #29548a;
      width: 100%;
      height: 100%;
      background-color: #19283e;
  
      .comments-header{
        background: url("../static/images/jj-head_129625e.jpg") top center no-repeat;
        background-size: 100%;
        width: 100%;
        height: 100%;
        text-align: center;
  
        p {
          margin-bottom: 0;
          padding-top: 5%;
          padding-bottom: 5%;
          display: block;
          height: 100%;
          line-height: 100%;
          font-size: 100%;
          color: #fff;
  
        }
  
      }
  
      .comments-content{
        color: #fff;
        font-size: 1rem;
  
        .comments-body{
          display: flex;
          padding: 5%;
          .avatar{
            flex: 20%;
            padding-right: 5%;
            img {
              width: 100%;
            }
          }
          .left{
            flex: 80%;
            padding-top: 2%;
  
            .range{
              display: flex;
              justify-content: space-between;
              padding-top: 1%;
              padding-bottom: 1%;
            }
            .star{
              span{
                color: yellow;
              }
            }
            .like{
              span:last-of-type {
                color: red;
              }
            }
            .pic{
              width: 100%;
              img {
                width: 100%;
                padding-top: 5%;
              }
            }
  
  
          }
  
        }
  
        .page{
          display: inline-block;
          text-align: center;
          width: 100%;
          span {
            background-color: #3b5783;
            padding-left: 1.5%;
            padding-right: 1.5%;
  
          }
          .active {
            background-color: transparent;
          }
        }
  
      }
  
      .comments-bottom{
        width: 100%;
        height: 100%;
  
        .bottom-bg{
          background: url("../static/images/bottom_5baadae.png") bottom center no-repeat;
          background-size: 100%;
          width: 100%;
          height: 100%;
          padding-bottom: 5%;
        }
  
      }
    }
  
  
  
  }
  
  .info{
    padding-left: 5%;
    padding-right: 5%;
    margin-top: 5%;
    margin-bottom: 30%;
    .info-box{
      border: 1px solid #29548a;
      width: 100%;
      height: 100%;
      background-color: #19283e;
  
      .info-header{
        background: url("../static/images/jj-head_129625e.jpg") top center no-repeat;
        background-size: 100%;
        width: 100%;
        height: 100%;
        text-align: center;
  
        p {
          margin-bottom: 0;
          padding-top: 5%;
          padding-bottom: 5%;
          display: block;
          height: 100%;
          line-height: 100%;
          font-size: 100%;
          color: #fff;
  
        }
  
      }
  
      .detail {
        width: 100%;
        display: flex;
        flex-direction: column;
        color: #fff;
        padding-top: 1%;
  
        .detail-row {
          flex: 1;
          display: flex;
          text-align: center;
  
          &:nth-of-type(-n+3) {
            border-bottom: 1px solid #315989;
  
          }
  
          span {
            display: block;
            padding-top: 1%;
            padding-bottom: 1%;
          }
          .left {
            flex: 35%;
            border-right: 1px solid #315989;
  
          }
          .right {
            flex: 65%;
          }
        }
  
  
  
        }
  
  
      .info-bottom{
        width: 100%;
        height: 100%;
  
        .bottom-bg{
          background: url("../static/images/bottom_5baadae.png") bottom center no-repeat;
          background-size: 100%;
          width: 100%;
          height: 100%;
          padding-bottom: 5%;
        }
  
      }
  
    }
  }
  
  .startButton{
    width: 60%;
    //margin: 0 auto;
    position: fixed;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    img {
      width: 100%;
    }
  }
  